<template>
	<view class="container">
		<!-- 用户信息头部（简约科技风格） -->
		<view class="user-header" :style="{ paddingTop: statusBarHeight + 14 + 'px', backgroundColor: '#1a1a1a' }">
			<view class="header-decoration">
				<view class="dot-grid"></view>
				<view class="tech-circle"></view>
			</view>
			
			<view class="user-info">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatar || '/static/avatar-default.png'" mode="aspectFill"></image>
					<view class="avatar-border"></view>
				</view>
				<view class="info-content">
					<view v-if="isLogin">
						<text class="nickname">{{ userInfo.nickname }}</text>
						<view class="user-level">
							<image class="level-icon" src="/static/level-icon.png" mode="aspectFit"></image>
							<text class="level-text">{{ userInfo.level }}</text>
						</view>
					</view>
					<view v-else class="login-btn" @click="goToLogin">
						<text>登录/注册</text>
					</view>
				</view>
			</view>
			<view class="setting-icon" @click="goToSettings">
				<view class="icon-wrapper">
					<uni-icons type="gear" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 会员卡片 -->
		<view class="vip-card" v-if="isLogin">
			<view class="vip-card-bg"></view>
			<view class="vip-info">
				<view class="vip-title-row">
					<text class="vip-title">{{ userInfo.isVip ? '尊享会员' : '普通会员' }}</text>
					<text class="vip-tips">{{ userInfo.isVip ? '会员特权享不停' : '开通会员享特权' }}</text>
				</view>
				<view class="vip-date" v-if="userInfo.isVip">有效期至 {{ userInfo.vipEndDate }}</view>
			</view>
			<view class="vip-button" @click="handleVip">
				{{ userInfo.isVip ? '查看权益' : '立即开通' }}
			</view>
		</view>
		
		<!-- 用户资产 -->
		<view class="asset-section">
			<view class="asset-item" @click="goToWallet">
				<text class="asset-value">{{ userInfo.balance || 0 }}</text>
				<text class="asset-label">余额</text>
			</view>
			<view class="asset-item" @click="goToCoupons">
				<text class="asset-value">{{ userInfo.coupons || 0 }}</text>
				<text class="asset-label">优惠券</text>
			</view>
			<view class="asset-item" @click="goToPoints">
				<text class="asset-value">{{ userInfo.points || 0 }}</text>
				<text class="asset-label">积分</text>
			</view>
			<view class="asset-item" @click="goToGifts">
				<text class="asset-value">{{ userInfo.gifts || 0 }}</text>
				<text class="asset-label">礼品卡</text>
			</view>
		</view>
		
		<!-- 我的订单 -->
		<view class="section-container">
			<view class="section-header">
				<view class="title-group">
					<text class="section-title">我的订单</text>
					<text class="section-subtitle">全部交易订单</text>
				</view>
				<view class="more-link" @click="goToOrderList">
					<text class="more-text">全部订单</text>
					<uni-icons type="arrow-right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<view class="order-icons">
				<view class="order-icon-item" @click="goToOrderList('pending')">
					<view class="badge" v-if="orderCounts.pending > 0">{{ orderCounts.pending > 99 ? '99+' : orderCounts.pending }}</view>
					<view class="icon-circle">
						<uni-icons type="wallet" size="24" color="#3b7ff2"></uni-icons>
					</view>
					<text class="icon-text">待付款</text>
				</view>
				<view class="order-icon-item" @click="goToOrderList('shipping')">
					<view class="badge" v-if="orderCounts.shipping > 0">{{ orderCounts.shipping > 99 ? '99+' : orderCounts.shipping }}</view>
					<view class="icon-circle">
						<uni-icons type="cart" size="24" color="#32c5ff"></uni-icons>
					</view>
					<text class="icon-text">待发货</text>
				</view>
				<view class="order-icon-item" @click="goToOrderList('delivered')">
					<view class="badge" v-if="orderCounts.delivered > 0">{{ orderCounts.delivered > 99 ? '99+' : orderCounts.delivered }}</view>
					<view class="icon-circle">
						<uni-icons type="paperplane" size="24" color="#ff4f8d"></uni-icons>
					</view>
					<text class="icon-text">待收货</text>
				</view>
				<view class="order-icon-item" @click="goToOrderList('completed')">
					<view class="icon-circle">
						<uni-icons type="chat" size="24" color="#6259ef"></uni-icons>
					</view>
					<text class="icon-text">待评价</text>
				</view>
				<view class="order-icon-item" @click="goToAfterSale">
					<view class="icon-circle">
						<uni-icons type="refresh" size="24" color="#58bc71"></uni-icons>
					</view>
					<text class="icon-text">退款/售后</text>
				</view>
			</view>
		</view>
		
		<!-- 我的服务 -->
		<view class="section-container">
			<view class="section-header">
				<view class="title-group">
					<text class="section-title">我的服务</text>
					<text class="section-subtitle">快捷服务中心</text>
				</view>
			</view>
			<view class="service-grid">
				<view class="service-item" v-for="(item, index) in services" :key="index" @click="goToService(item)">
					<view class="service-icon-wrapper" :style="{ background: getServiceGradient(index) }">
						<uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
					</view>
					<text class="service-text">{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 推荐商品 -->
		<view class="section-container">
			<view class="section-header">
				<view class="title-group">
					<text class="section-title">为你推荐</text>
					<text class="section-subtitle">猜你喜欢 · 精品优选</text>
				</view>
				<view class="more-link" @click="goToRecommendations">
					<text class="more-text">查看更多</text>
					<uni-icons type="arrow-right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<view class="recommend-grid">
				<view class="recommend-item" v-for="(item, index) in recommendProducts" :key="index" @click="goToProduct(item.id)">
					<image :src="item.image" mode="aspectFill" class="recommend-image"></image>
					<view class="recommend-info">
						<text class="recommend-title">{{ item.title }}</text>
						<text class="recommend-price">¥{{ item.price }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载更多状态提示 -->
			<view class="loading-more" v-if="isLoading">
				<uni-icons type="spinner-cycle" size="16" color="#999" class="loading-icon"></uni-icons>
				<text>加载中...</text>
			</view>
			
			<!-- 无更多数据提示 -->
			<view class="no-more" v-if="!hasMoreRecommend && recommendProducts.length > 0">
				<text>— 没有更多商品了 —</text>
			</view>
		</view>
		
		<!-- 底部占位 -->
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue'
	
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				statusBarHeight: 0,
				isLogin: true, // 测试数据，实际应从登录状态获取
				userInfo: {
					nickname: '微笑的猫咪',
					avatar: 'https://img.icons8.com/color/48/000000/user-female-circle--v1.png',
					level: 'LV.4',
					isVip: true,
					vipEndDate: '2023-12-31',
					balance: 568,
					coupons: 5,
					points: 2345,
					gifts: 0
				},
				orderCounts: {
					pending: 2,
					shipping: 1,
					delivered: 0
				},
				services: [
					{ name: '收藏夹', icon: 'star', url: '/pages/favorite/favorite' },
					{ name: '足迹', icon: 'eye', url: '/pages/footprint/footprint' },
					{ name: '地址管理', icon: 'location', url: '/pages/address/address' },
					{ name: '客服中心', icon: 'headphones', url: '/pages/customer_service/customer_service' },
					{ name: '帮助中心', icon: 'help', url: '/pages/help/help' },
					{ name: '意见反馈', icon: 'email', url: '/pages/feedback/feedback' },
					{ name: '分享好友', icon: 'redo', url: '' },
					{ name: '设置', icon: 'gear', url: '/pages/settings/settings' }
				],
				// 色彩列表，与首页保持一致
				colorList: ['#3b7ff2', '#32c5ff', '#ff4f8d', '#6259ef', '#58bc71'],
				recommendProducts: [
					{
						id: 1,
						image: 'https://images.unsplash.com/photo-1604176424472-17cd740f74e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGZhc2hpb24lMjBvdmVyc2l6ZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						title: '简约设计感宽松上衣',
						price: 399
					},
					{
						id: 2,
						image: 'https://cbu01.alicdn.com/img/ibank/O1CN018G72Gc1zMedSYsK61_!!2214685846700-0-cib.jpg_460x460q100.jpg',
						title: '高腰直筒休闲裤',
						price: 580
					},
					{
						id: 3,
						image: 'https://images.unsplash.com/photo-1491897554428-130a60dd4757?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fGZsYXQlMjBzaG9lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60',
						title: '复古玛丽珍鞋',
						price: 720
					},
					{
						id: 4,
						image: 'https://cbu01.alicdn.com/img/ibank/O1CN0188Rbhd1InC9ddpC3O_!!4012130937-0-cib.jpg_460x460q100.jpg',
						title: '优雅气质连衣裙',
						price: 459
					}
				],
				// 加载更多相关状态
				isLoading: false,
				hasMoreRecommend: true,
				allRecommendProducts: []
			}
		},
		onLoad() {
			// 获取状态栏高度
			this.getStatusBarHeight();
		},
		created() {
			// 初始化所有推荐商品数据
			this.allRecommendProducts = [...this.recommendProducts];
			
			// 额外的推荐商品数据用于加载更多
			const moreProducts = [
				{
					id: 5,
					image: 'https://cbu01.alicdn.com/img/ibank/O1CN01CaJ5oa2J48zJU4Yst_!!2219312519367-0-cib.jpg_460x460q100.jpg',
					title: '夏季轻薄透气T恤',
					price: 199
				},
				{
					id: 6,
					image: 'https://cbu01.alicdn.com/img/ibank/O1CN01iL5UWw2BaeAWulSm0_!!254418355.jpg_460x460q100.jpg',
					title: '韩版宽松运动裤',
					price: 289
				},
				{
					id: 7,
					image: 'https://cbu01.alicdn.com/img/ibank/O1CN01KpcoWr22GBw0MYlDw_!!2013457092-0-cib.jpg_460x460q100.jpg',
					title: '复古小方包单肩包',
					price: 369
				},
				{
					id: 8,
					image: 'https://cbu01.alicdn.com/img/ibank/O1CN01QjWzKr1OCRqdURfCK_!!2208562791669.jpg_460x460q100.jpg',
					title: '百搭休闲帆布鞋',
					price: 259
				}
			];
			
			// 将额外数据添加到所有推荐数据中
			this.allRecommendProducts = [...this.allRecommendProducts, ...moreProducts];
		},
		// 添加页面触底事件处理函数
		onReachBottom() {
			console.log("个人中心页面触底，加载更多推荐");
			// 调用加载更多推荐商品的方法
			this.loadMoreRecommend();
		},
		methods: {
			// 获取状态栏高度的方法
			getStatusBarHeight() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				// 设置状态栏高度
				this.statusBarHeight = systemInfo.statusBarHeight || 0;
				console.log('状态栏高度:', this.statusBarHeight);
			},
			// 为服务生成渐变背景
			getServiceGradient(index) {
				const colorIndex = index % this.colorList.length;
				const baseColor = this.colorList[colorIndex];
				const lightColor = this.lightenColor(baseColor, 20);
				return `linear-gradient(135deg, ${baseColor} 0%, ${lightColor} 100%)`;
			},
			// 颜色变亮的辅助函数
			lightenColor(hex, percent) {
				// 将十六进制颜色转换为RGB
				let r = parseInt(hex.slice(1, 3), 16);
				let g = parseInt(hex.slice(3, 5), 16);
				let b = parseInt(hex.slice(5, 7), 16);
				
				// 增加亮度
				r = Math.min(255, r + Math.floor(percent / 100 * 255));
				g = Math.min(255, g + Math.floor(percent / 100 * 255));
				b = Math.min(255, b + Math.floor(percent / 100 * 255));
				
				// 转回十六进制
				return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
			},
			// 加载更多推荐商品
			loadMoreRecommend() {
				// 如果正在加载或没有更多数据，则不处理
				if (this.isLoading || !this.hasMoreRecommend) return;
				
				// 设置加载状态
				this.isLoading = true;
				
				// 模拟加载过程
				setTimeout(() => {
					// 获取当前商品数量
					const currentCount = this.recommendProducts.length;
					// 当所有的商品已加载完
					if (currentCount >= this.allRecommendProducts.length) {
						this.hasMoreRecommend = false;
						this.isLoading = false;
						return;
					}
					
					// 每次加载4个商品
					const nextItems = this.allRecommendProducts.slice(currentCount, currentCount + 4);
					// 添加到当前显示的商品列表
					this.recommendProducts = [...this.recommendProducts, ...nextItems];
					// 取消加载状态
					this.isLoading = false;
				}, 800);
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			goToSettings() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				});
			},
			handleVip() {
				if (this.userInfo.isVip) {
					uni.navigateTo({
						url: '/pages/vip/vip_benefits'
					});
				} else {
					uni.navigateTo({
						url: '/pages/vip/vip_purchase'
					});
				}
			},
			goToWallet() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				});
			},
			goToCoupons() {
				uni.navigateTo({
					url: '/pages/coupons/coupons'
				});
			},
			goToPoints() {
				uni.navigateTo({
					url: '/pages/points/points'
				});
			},
			goToGifts() {
				uni.navigateTo({
					url: '/pages/gifts/gifts'
				});
			},
			goToOrderList(status = 'all') {
				uni.navigateTo({
					url: `/pages/order/order_list?status=${status}`
				});
			},
			goToAfterSale() {
				uni.navigateTo({
					url: '/pages/after_sale/after_sale'
				});
			},
			goToService(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				} else if (item.name === '分享好友') {
					// 调用分享API
					uni.showToast({
						title: '分享功能暂未实现',
						icon: 'none'
					});
				}
			},
			goToRecommendations() {
				uni.navigateTo({
					url: '/pages/recommend/recommend'
				});
			},
			goToProduct(id) {
				uni.navigateTo({
					url: `/pages/product_detail/product_detail?id=${id}`
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 50px; // 为底部导航栏留出空间
}

// 用户信息头部 - 简约科技风
.user-header {
	padding: 20px 16px 30px;
	position: relative;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

// 科技感装饰元素
.header-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	opacity: 0.1;
	z-index: 0;
}

.dot-grid {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: 
		radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px),
		radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
	background-size: 30px 30px, 90px 90px;
	background-position: 0 0, 15px 15px;
}

.tech-circle {
	position: absolute;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.1);
	top: -120px;
	right: -60px;
	
	&::before {
		content: '';
		position: absolute;
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		border-radius: 50%;
		border: 1px solid rgba(255,255,255,0.15);
	}
	
	&::after {
		content: '';
		position: absolute;
		top: 40px;
		left: 40px;
		right: 40px;
		bottom: 40px;
		border-radius: 50%;
		border: 1px solid rgba(255,255,255,0.2);
	}
}

.user-info {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}

.avatar-container {
	position: relative;
	width: 70px;
	height: 70px;
}

.avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.2);
	position: relative;
	z-index: 2;
}

.avatar-border {
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.2);
	z-index: 1;
}

.info-content {
	margin-left: 15px;
}

.nickname {
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 6px;
	display: block;
}

.user-level {
	display: inline-flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 3px 12px;
}

.level-icon {
	width: 14px;
	height: 14px;
	margin-right: 5px;
}

.level-text {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.9);
}

.login-btn {
	background-color: rgba(255, 255, 255, 0.15);
	color: #fff;
	border-radius: 20px;
	padding: 6px 20px;
	font-size: 14px;
}

.setting-icon {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
}

.icon-wrapper {
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
}

// 会员卡片
.vip-card {
	margin: -15px 15px 0;
	background: linear-gradient(90deg, #382c20 0%, #5e4935 100%);
	border-radius: 16px;
	padding: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
	z-index: 5;
}

.vip-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 10%),
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 10%);
	z-index: -1;
}

.vip-title-row {
	display: flex;
	align-items: center;
}

.vip-title {
	font-size: 16px;
	font-weight: 700;
	color: #e9bd71;
	margin-right: 10px;
	letter-spacing: 0.5px;
}

.vip-tips {
	font-size: 12px;
	color: #e9bd71;
	opacity: 0.8;
}

.vip-date {
	font-size: 11px;
	color: #e9bd71;
	opacity: 0.7;
	margin-top: 5px;
}

.vip-button {
	background: linear-gradient(135deg, #e9bd71 0%, #d6a75a 100%);
	color: #382c20;
	font-size: 12px;
	padding: 6px 15px;
	border-radius: 20px;
	font-weight: 500;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

// 用户资产
.asset-section {
	margin: 15px 15px 0;
	background-color: #fff;
	border-radius: 16px;
	display: flex;
	padding: 18px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.asset-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	
	&:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 15%;
		bottom: 15%;
		width: 1px;
		background-color: #f0f0f0;
	}
}

.asset-value {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}

.asset-label {
	font-size: 12px;
	color: #999;
}

// 通用部分容器
.section-container {
	margin: 15px 15px 0;
	background-color: #fff;
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.title-group {
	display: flex;
	flex-direction: column;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 3px;
}

.section-subtitle {
	font-size: 11px;
	color: #999;
}

.more-link {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #999;
	background-color: #f5f5f5;
	padding: 5px 10px;
	border-radius: 15px;
}

.more-text {
	margin-right: 2px;
}

// 订单图标区域
.order-icons {
	display: flex;
	justify-content: space-between;
}

.order-icon-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.badge {
	position: absolute;
	right: 5px;
	top: -5px;
	background-color: #ff4f8d;
	color: #fff;
	font-size: 10px;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	text-align: center;
	line-height: 16px;
	padding: 0 4px;
	transform: translateX(50%);
	z-index: 2;
}

.icon-circle {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f8f8f8;
	border-radius: 50%;
	margin-bottom: 8px;
	transition: transform 0.2s;
	
	&:active {
		transform: scale(0.95);
	}
}

.icon-text {
	font-size: 12px;
	color: #666;
}

// 服务网格
.service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 0;
}

.service-icon-wrapper {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 8px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
		background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
		transform: rotate(45deg);
	}
}

.service-text {
	font-size: 12px;
	color: #666;
}

// 推荐商品
.recommend-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.recommend-item {
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.recommend-image {
	width: 100%;
	height: 150px;
}

.recommend-info {
	padding: 12px;
}

.recommend-title {
	font-size: 13px;
	color: #333;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 34px;
}

.recommend-price {
	font-size: 15px;
	font-weight: bold;
	color: #ff4f8d;
	margin-top: 5px;
	display: block;
}

// 加载更多状态提示
.loading-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px 0;
	color: #999;
	font-size: 13px;
}

.loading-icon {
	margin-right: 5px;
	animation: spin 1s linear infinite;
}

// 无更多数据提示
.no-more {
	text-align: center;
	color: #999;
	font-size: 12px;
	padding: 15px 0;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
</style> 